<?php
/*
Template Name: 客户端游戏
*/
?>
<?php get_header(); ?>
<div class="cate col-lg-2 col-md-2">
	<button class="game-cate-single btn btn-primary" cat_id="6" type="button">所有游戏(<?php echo gamux_get_allfirst_posts(6); ?>)</button>
<?php
$categories=get_categories(array(
  'orderby' => 'id',
  'order' => 'ASC',
  'parent' => '6'
  ));
?>
<?php //实现所有二级分类
  foreach($categories as $category) {
    echo '<button class="game-cate-single btn btn-default" cat_id="'.$category->term_id.'">'. $category->name.'('.$category->count.')</button> ';
  }
?>
</div>
<div class="game col-lg-10 col-md-10">
	<div id="container">
		<?php query_posts('cat=6&posts_per_page=30'); ?>
		<?php if (have_posts()) : ?>
		<?php while (have_posts()) : the_post(); ?>
		<li class="game-single">
			<div class="index-games-thumb">
				<img class="img-thumbnail" src="<?php echo src_post_thumbnail(); ?>">
			</div>
			<div class="index-games-title">
				<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
			</div>
		</li>
		<?php endwhile; ?>  
		<?php endif; ?>
		<li class="clear"></li>
	</div>
	<div class="fanye"><ul class="pagination"></ul></div>
</div>
<!--引用的布局和js库-->
<link href="<?php bloginfo('template_url'); ?>/css/clientgame-page.css" rel="stylesheet">
<script src="<?php bloginfo('template_url'); ?>/library/jquery.Pagination.min.js"></script>
<script>
var catid = 6;
var url = "http://gamux.org/clentgamejson";
var totalpage;
$(".game-cate-single").click( function(event) {
	catid = $(this).attr("cat_id");
	$('.pagination').empty();
	$('.pagination').unbind('page');
	$('.pagination').removeData('twbs-pagination');
	$.getJSON(url, {"catn": catid, "navn":1}, function(data) {
		$.gameJSON(data.newgames);
		totalpage = data.info.totalpage;
		$('.pagination').twbsPagination({
			totalPages: totalpage,
			visiblePages: 7,
			onPageClick: function (event, page) {
				$.getJSON(url, {"catn": catid, "navn": page}, function(data) {
					$.gameJSON(data.newgames);
				});
			}
		});
	});
});
$.getJSON(url, {"catn": catid, "navn": 1}, function(data) {
	totalpage = data.info.totalpage;
	$('.pagination').twbsPagination({
		totalPages: totalpage,
		visiblePages: 7,
		onPageClick: function (event, page) {
			$.getJSON(url, {"catn": catid, "navn": page}, function(data) {
				$.gameJSON(data.newgames);
			});
		}
	});
});
$.gameJSON = function(data) {
	$('#container').html('');
	$.each(data, function(v, k) {
		var game = $('<li/>');
		game.attr('class', 'game-single');
		$('#container').append(game);
		
		var thumb = $('<div/>');
		thumb.attr('class', 'index-games-thumb');
		game.append(thumb);
		var thumb_img = $('<img/>');
		thumb_img.attr({
			'src' : k.thumbnail_image,
			'class' : 'img-thumbnail'
		});
		thumb.append(thumb_img);
		
		var title = $('<div/>');
		title.attr('class', 'index-games-title');
		game.append(title);
		var title_a = $('<a/>');
		title_a.attr('href', k.url);
		title_a.html(k.title);
		title.append(title_a);
	});
}
</script>
<?php get_footer(); ?>

